<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<title>jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="/jQuery_class_stu/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#ajaxBtn").on("click",function(){
			$.ajax({
				"url":"/jQuery_class_stu/jQueryServlet",//요청 URL 설정
				type:"POST",//요청 방식 - 생략하면 GET
				data:"cmd=getMemberById&id="+$("#id").val(),//요청파라미터 1.query
				dataType:"text",//응답데이터의 형태(text기본)
				error: errorMethod,//값:  함수 - 에러 응답이 온경우 호출할 함수 등록
				success:function(txt){//값: 함수 - 정상 응답이 온 경우 호출할 함수 등록
					//success등록 함수 매개변수(모두 생략 가능)
					//1. 서버가 응답한 데이터, 2. 응답 코드 메세지(success, error), 3. XHR
				alert(txt);
//				$("#layer").append(txt);//마지막 자식 노드 추가
//				$("#layer").html(txt);//하위 노드를 txt로 변경 ( 태그포함 - DOM 객체화) -> 노드화 시킴
				$("#layer").text(txt);//하위 노드를 txt로 변경(문자열로 추가)
			  },
			  beforeSend:checkId
			});
		});
		$("#jsonBtn").on("click", function(){
			/*
			/jQuery_class_stu/jQueryServlet요청
			cmd - getMemberByIdJSON, id - 입력된 값
			요청방식 - POST
			응답 데이터 타입 - JSON
			*/
			$.ajax({
				"url":"/jQuery_class_stu/jQueryServlet",
				data:{"cmd":"getMemberByIdJSON", id:$("#id").val()},
				type:"POST",
				dataType:"JSON",
				beforeSend:checkId,
				error:errorMethod,
				success:function(obj){
					alert(obj.id+"-"+obj.name);
				}
				
			});
		});
	});
	function checkId(){
		//if($("#id").val().length==0)
		//!id=true = 0
			if(!$("#id").val()){
				alert("조회할 ID를 넣으세요");
				$("#id").val("").focus();
				return false;//false를 return 하면 서버로 요청이 안된다.
				 
			
		}
	}
	/* 
	ajax()의 error프라퍼티에 등록할 함수.
	매개변수 (모두생략가능)
	1. XMLHttpRequest 객체
	2. 응답 코드 메세지(success,error)
	3. 에러메세지
	*/
	
	function errorMethod(){
		alert("요청시 오류 발생");
	}
</script>
     
</head>
<body>    
  
<form>
	ID : <input type="text" name="id" id="id">
	<input type="button" value="ajax전송" id="ajaxBtn">
	<input type="button" value="json전송" id="jsonBtn">
</form>
<div id="layer"></div>
</body>
</html>











